import React, {Component,} from 'react';
import './style.css'
import store from "../../../store/index";
import {Dialog, Popup, Typography} from 'react-vant';
import api from '../../../api';
import {withRouter} from 'react-router-dom'

class Player extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
        this.state = {
            showPopup: false,
            setShowPopup: false,
            loops: true,
            randoms: false,
            singles: false,
            play: true,
            suspend: false,
            list: {},
            inputValue: {}
        }
        // console.log(store.getState(),'12312')

   

        // console.log(store.getState().inputValue.al.id, 'cc')
    }


    
    goAudioDetail = () =>{
        document.documentElement.scrollTop = document.body.scrollTop =0;
        this.props.history.push('/audiodetail')
    }


    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('qwewqe')
        console.log(store.getState().music.url)
    }

    // com() {
    //     console.log('12313');
    //     // console.log(store.getState().list,'cv')
    //
    //     // console.log(this.state,'ss,')
    // }
    shows() {
        console.log('s')

        this.setState(() => {
            return {
                setShowPopup: true,
                showPopup: true,
            }
        })
    }

    closeIcon() {
        console.log('123131231vbcb')

        Dialog.confirm({
            message: '是否全部删除',
        })
            .then(() => {
                console.log(store.getState().list.splice())
                const action = {
                    type:'clearAllIist',
                    value:store.getState().list.splice()
                }
                store.dispatch(action)
                this.setState(() => {
                    return {
                        setShowPopup: false,
                        showPopup: false,
                    }
                })
            })
            .catch(() => {

            });
    }

    loop() {
        this.setState(() => {
            return {
                loops: false,
                randoms: true,
                singles: false,
            }
        })
    }

    random() {
        let randomList = {}
        console.log('123213')
        randomList = store.getState().list
        console.log(randomList.forEach((v, i) => {
            console.log(Math.floor(Math.random(i) * 10 + 1), i)
        }))
        console.log(randomList[0])
        this.setState(() => {
            return {
                loops: false,
                randoms: false,
                singles: true,
            }
        })
    }

    single() {
        this.setState(() => {
            return {
                loops: true,
                randoms: false,
                singles: false,
            }
        })
    }

    overlay() {
        console.log('sb')
        this.setState(() => {
            return {
                setShowPopup: false,
                showPopup: false,
            }
        })
    }

    onclickLoop(v) {
        console.log('12312321', 'aasss', v)
        const action = {
            type: 'inputValue',
            value: v
        }

        store.dispatch(action)
        this.setState(() => {
            return {
                inputValue: store.getState().inputValue
            }
        })
        console.log(this.state.inputValue)
    }

    play() {
        console.log('123')
        this.setState(() => {
            return {
                play: true,
                suspend: false
            }
        })
    }

    suspend() {
        console.log('asdasdsa')
        this.setState(() => {
            return {
                play: false,
                suspend: true
            }
        })
    }

    delete(v) {
        console.log(v)
        const action = {
            type: 'deleteList',
            value: v
        }
        store.dispatch(action)
        console.log(store.getState().list)
        this.setState(() => {
            return {
                list: store.getState().list
            }
        })
    }

    render() {  
        console.log('00000000000000000000',this.props)
        return (
            <div>
                {store.getState().inputValue.lenght!==0?<div className='player'>

<img src={store.getState().inputValue.al.picUrl} className='player_img' alt="" onClick={this.goAudioDetail}/>
<div className='player_name'>
    <span className='player_name_top'>{store.getState().inputValue.name}</span>
    <span className='player_name_bottom'>{store.getState().inputValue.ar[0].name}</span>
</div>
<div className='player_icon'>
    {
        this.state.play == true ? <span className='iconfont icon-bofang1 player_icon_list '
                                        onClick={this.suspend.bind(this)}></span> :
            <span className='iconfont  player_icon_list icon-zanting'
                  onClick={this.play.bind(this)}></span>
    }

    <span className='iconfont icon-yinleyinpin player_icon_list'
          onClick={this.shows.bind(this)}>

    </span>
</div>
<Popup
    visible={this.state.showPopup}
    position="bottom"
    onClickOverlay={this.overlay.bind(this)}
    round
    style={{height: '50%'}}
>

    <div className='player_close_icon'>


        {this.state.loops == true ? <span className="iconfont icon-shunxubofang"
                                          style={{color: 'red', fontSize: '18px', float: 'right'}}
                                          onClick={this.loop.bind(this)}><span
            className='blocks'>顺序循环</span></span> : this.state.randoms == true ?
            <span className="iconfont icon-24gl-shuffle" onClick={this.random.bind(this)}
                  style={{color: 'red', fontSize: '18px', float: 'right'}}><span
                className="blocks">随机循环</span></span> :
            <span className='iconfont icon-danquxunhuan' onClick={this.single.bind(this)}
                  style={{color: 'red', fontSize: '18px', float: 'right'}}> <span
                className="blocks">单曲循环</span></span>}
        <span onClick={this.closeIcon.bind(this)} className="iconfont icon-shanchu"
              style={{color: 'red', fontSize: '18px', float: 'right'}}></span>
    </div>
    {store.getState().list.map((v, i) => {
        return (

            <div className='player_close_list' key={v.id}>
                <span
                    className={store.getState().inputValue.al.id == v.al.id ? 'iconfont icon-bofang1 player_close_list_icon' : 'player_close_list_icon'}></span>
                <Typography.Text ellipsis={1} onClick={this.onclickLoop.bind(this, v)}
                                 className='player_close_list_na'>{v.name}--{v.ar[0].name}</Typography.Text>
                <span className='player_close_heart iconfont icon-shanchu'
                      onClick={this.delete.bind(this, v)}></span>
                <span className=' player_close_heart iconfont icon-aixin'></span>

            </div>
        )
    })}

</Popup>
</div>:null}
            </div>
        );
    }
}

export default withRouter(Player);